// 这是首页的样式设置
//引入重置样式
@import './reset.less';

//包裹所有的大盒子
#wrap {
    width: 7.5rem;
    margin: 0 auto;

    //头部的设置
    #header {
        width: 7.5rem;
        height: 1.6rem;
        background: linear-gradient(#ff6040 0%, #ff7560 71%, #ff8a80 100%);
        overflow: hidden;

        //logo商标的设置
        .logo {
            width: 100%;
            height: 0.64rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 0.2rem;

            // logo
            i {
                font-size: 0.4rem;
                color: #fff;
            }

            img {
                width: 1.82rem;
                height: 0.48rem;
            }

            // 搜索框
            input {
                width: 3.4rem;
                height: 0.64rem;
                padding-left: 0.24rem;
                font-size: 0.28rem;
                color: #999;
                box-sizing: border-box;
            }
        }

        // 头部导航栏
        .top-nav {
            width: 100%;
            height: 0.64rem;
            line-height: 0.64rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.1rem;


            //左侧的内容
            ul {
                width: 6.2rem;
                display: flex;
                justify-content: space-around;
                align-items: center;

                li {
                    width: 0.6rem;
                    height: 0.64rem;
                    float: left;
                    text-align: center;

                    a {
                        color: #FFF3F2;
                        font-size: 0.28rem;
                        display: inline-block;
                        height: 0.63rem;

                    }

                    .active {
                        font-size: 0.30rem;
                        font-weight: 700;
                        border-bottom: 0.03rem solid #fff;
                        border-radius: 1px;
                    }
                }
            }

            //右侧的分类
            .nav-right {
                width: 1.3rem;
                height: 0.64rem;
                text-align: center;
                border-left: 1px solid #ddd;

                .iconfont {
                    font-size: 0.28rem;
                    color: #fff;
                    margin-right: 0.05rem;
                }

                a {
                    color: #fff;
                    font-size: 0.28rem;
                }
            }
        }
    }

    //轮播图的设置
    .banner-box {
        width: 6.7rem;
        height: 3.9rem;
        margin: 0.24rem auto;
        position: relative;
        overflow: hidden;
        box-shadow: 0.02rem 0.02rem 0.13rem 0.06rem #f2c0bb;
        margin-bottom: 0.5rem;


        // 轮播图
        .banner-items {
            width: 46.9rem;
            height: 3.9rem;
            position: absolute;

            li {
                float: left;
                width: 6.7rem;
                height: 3.9rem;

                img {
                    width: 6.7rem;
                    height: 3.9rem;
                }
            }
        }

        //小圆点
        .banner-dot {
            position: absolute;
            bottom: 0.2rem;
            left: 42%;

            span {
                width: 0.1rem;
                height: 0.1rem;
                display: inline-block;
                border-radius: 45%;
                background-color: #c1bbbb;
                margin-right: 0.05rem;
                cursor: pointer;
            }

            .banner-active {
                background: #fff;
            }
        }
    }

    // 限时秒杀
    .seckill-box {
        width: 100%;
        height: 1rem;

        ul {
            height: 1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
                float: left;
                font-size: 0.2rem;
                color: #333;

                img {
                    margin-left: 0.24rem;
                    margin-bottom: 0.1rem;
                }
            }
        }
    }

    //下面商品所有的盒子
    #shop-list {
        width: 100%;
        height: auto;
        background: #f2f2f2;

        //包裹三张图片的盒子
        .imgs {
            width: 7.1rem;
            height: 3.5rem;
            background: #ddd;
            margin-left: 0.2rem;
            margin-top: 0.3rem;
            margin-bottom: 0.2rem;
            display: flex;
            justify-content: space-between;

            //左边的盒子
            .left-box {
                width: 3.5rem;
                height: 3.5rem;
                background: url('../img/images/big1.png') no-repeat;
                background-size: 3.5rem 3.5rem;

                //标题
                .title {
                    width: 100%;
                    height: 0.6rem;
                    overflow: hidden;

                    p {
                        font-size: 0.26rem;
                        color: #85A642;
                        margin: 0.2rem 0 0 0.2rem;
                    }

                    a {
                        font-size: 0.16rem;
                        color: #333333;
                        margin: 0.3rem 0.2rem 0 0;
                    }
                }

                //副标题
                h4 {
                    padding-left: 0.1rem;
                    margin-top: 0.1rem;
                    color: #B1CC7A;
                    font-size: 0.16rem;
                }

                // 倒计时
                .time {
                    width: 100%;
                    height: 0.2rem;
                    display: flex;
                    color: #B1CC7A;
                    font-size: 0.2rem;
                    padding: 0.1rem;

                    span {
                        display: inline-block;
                        width: 0.3rem;
                        height: 0.3rem;
                        line-height: 0.3rem;
                        background: linear-gradient(180deg, #85A642 0%, #B1CC7A 100%);
                        text-align: center;
                        color: #fff;
                        font-size: 0.16rem;
                    }
                }
            }

            // 右边的大盒子
            .right-box {
                width: 3.5rem;
                height: 3.5rem;

                //右边的上面盒子
                .right-top,
                .right-bot {
                    width: 3.5rem;
                    height: 1.7rem;
                    margin-bottom: 0.1rem;
                    background: url('../img/images/big2.png') no-repeat;
                    background-size: 3.5rem 1.7rem;
                    overflow: hidden;

                    // 标题
                    h2 {
                        font-size: 0.26rem;
                        color: #FF6040;
                        margin: 0.2rem 0 0.12rem 0.2rem;
                    }

                    //副标题
                    p {
                        font-size: 0.16rem;
                        margin-left: 0.2rem;
                        color: #FF9580;
                        margin-bottom: 0.08rem;
                    }

                    //链接
                    a {
                        display: block;
                        width: 1.2rem;
                        height: 0.4rem;
                        background: linear-gradient(180deg, #FF6040 0%, #FF9F80 100%);
                        border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
                        text-align: center;
                        line-height: 0.4rem;
                        color: #fff;
                        font-size: 0.2rem;
                        margin-left: 0.2rem;
                    }

                }

                //右边的下面的盒子
                .right-bot {
                    background: url('../img/images/big3.png') no-repeat;
                    margin-bottom: 0;
                    background-size: 3.5rem 1.7rem;

                    h2 {
                        color: #AF40FF;
                    }

                    p {
                        color: #CA80FF;
                    }

                    a {
                        background: linear-gradient(180deg, #AF40FF 0%, #F58CFF 100%);
                    }
                }
            }

        }

        //下面的大盒子
        .type {
            width: 100%;
            height: auto;
            background: #fff;

            //双十一和畅想全球商品列表
            .list {
                width: 7.1rem;
                height: auto;
                background: #fff;
                margin: auto;
                margin-bottom: 0.56rem;

                //标题的设置
                .list-title {
                    width: 100%;
                    height: 0.86rem;
                    line-height: 0.86rem;
                    text-align: center;
                    display: flex;
                    justify-content: space-between;

                    p {
                        width: 3.55rem;
                        font-size: 0.28rem;
                        color: #999;
                        cursor: pointer;
                    }

                    .list-active {
                        font-size: 0.32rem;
                        color: #FF6040;
                    }
                }

                //双十一商品内容
                .double-box,
                .total-box {
                    width: 6.7rem;
                    margin: 0 auto;

                    #double-one,
                    #total {
                        width: 6.7rem;
                        height: auto;
                        display: flex;
                        justify-content: space-between;

                        li {
                            width: 1.6rem;
                            height: 1.65rem;

                            img {
                                width: 1.6rem;
                                height: 1.65rem;
                            }
                        }
                    }
                }


            }

            //热门推荐、上新推荐、所有商品的设置
            .all {
                width: 7.1rem;
                height: auto;
                margin: 0 auto;

                //标题
                .all-title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 0.2rem;

                    li {
                        width: 2.36rem;
                        height: 0.58rem;
                        font-size: 0.2rem;
                        color: #ffb04d;
                        font-weight: 600;
                        text-align: center;
                        line-height: 0.58rem;
                        cursor: pointer;

                        &:first-child {
                            border-top-left-radius: 0.1rem;
                            border-bottom-left-radius: 0.1rem;
                        }

                        &:last-child {
                            border-top-right-radius: 0.1rem;
                            border-bottom-right-radius: 0.1rem;
                        }
                    }

                    .all-active {
                        background: #f2a83b;
                        color: #fff;
                    }
                }

                //热门推荐的内容
                .hot,
                .fresh,
                .entire {
                    width: 6.7rem;
                    margin: 0 auto;

                    #hot-box,
                    #fresh-box,
                    #entire-box {
                        li {
                            width: 100%;
                            height: 2.8rem;
                            border: 0.02rem solid #ddd;
                            padding: 0.6rem 0 0.3rem 0.4rem;
                            box-sizing: border-box;
                            box-shadow: 0.02rem 0.02rem 0.13rem 0.06rem #ccc;
                            margin-bottom: 0.2rem;

                            img {
                                width: 1.4rem;
                                height: 2rem;
                                vertical-align: top;
                            }

                            div {
                                display: inline-block;
                                margin-left: 0.4rem;

                                p {
                                    font-size: 0.18rem;
                                    color: #000;
                                }

                                h4 {
                                    font-size: 0.18rem;
                                    color: #e03120;
                                    margin: 0.15rem 0;
                                }

                                s {
                                    color: #999;
                                    font-size: 0.18rem;
                                }

                                a {
                                    display: block;
                                    width: 1.36rem;
                                    height: 0.46rem;
                                    text-align: center;
                                    line-height: 0.46rem;
                                    background: #f2a83b;
                                    color: #fff;
                                    border-radius: 0.1rem;
                                    margin-top: 0.1rem;
                                    font-size: 0.18rem;
                                }
                            }
                        }
                    }
                }
            }
        }

    }
}